@extends('web.layout')

@section('content')
    <div class="layui-container fly-marginTop fly-user-main">
        @include('web.user.nav')

        <div class="fly-panel fly-panel-user" pad20>
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title" id="LAY_mine">
                    <li class="layui-this" lay-id="info">用户充值</li>
                    <li lay-id="recharge-log">充值记录</li>
                </ul>
                <div class="layui-tab-content" style="padding: 20px 0;">
                    <div class="layui-form layui-form-pane layui-tab-item layui-show">
                        <form method="post" action="">
                            <div class="layui-form-item">
                                <label for="L_username" class="layui-form-label" style="border-style:none;background-color:transparent">账户余额</label>

                                <div class="layui-form-mid">&nbsp;&nbsp;&nbsp; <span class="star-red">{{ Auth::user()->amount }}</span> 元</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_amount" class="layui-form-label">充值金额</label>
                                <div class="layui-input-inline">
                                    <input type="number" id="L_amount" name="amount" required lay-verify="required" placeholder="请输入充值金额" autocomplete="off" value="" class="layui-input">
                                </div>
                                <div class="layui-form-mid">&nbsp;元</div>
                            </div>

                            <div class="layui-form-item">
                                <button class="layui-btn recharge-btn" key="set-mine" lay-filter="recharge" lay-submit>确认充值</button>
                            </div>
                        </form>
                    </div>
                    <div class="layui-form layui-form-pane layui-tab-item">
                        <table class="layui-hide" id="table-list"></table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="open-qrcode" style="display: none;text-align: center;font-size: 18px">
        <p style="padding: 10px 0">充值金额为:<span class="open-recharge-amount star-red">1</span>元</p>
        <div id="qrCodeDiv" ></div>
        <p style="padding-top: 10px">手机支付宝扫描上方二维码完成充值</p>
    </div>
    <img id="qrCodeIco" src="https://t.alipayobjects.com/tfscom/T1Z5XfXdxmXXXXXXXX.png" style="display:none"/>
@endsection

@section('scripts')
    <script type="text/javascript" src="{{ asset('js/jquery1.12.1.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/ext/jquery.qrcode.min.js') }}"></script>
    <script>
        layui.use(['form','table'], function(){
            var $ = layui.$
                ,form = layui.form
                ,layer = layui.layer
                ,table = layui.table;

            var timeStatus;

            form.on('submit(recharge)', function(data){
                var amount = data.field.amount;
                $('.open-recharge-amount').text(amount);

                $.post("{{ url('/pay-recharge') }}",{amount:amount},function(obj){
                    if(obj.code === 0){
                        openQrcode(obj.data.qr_code);
                        timeStatus = setInterval(function(){
                            getQrStatus(obj.data.order_no)
                        }, 2000);
                    }else{
                        layer.msg(obj.msg);
                    }
                },'JSON');

                return false;
            });

            table.render({
                elem: '#table-list'
                ,url: "{{ url('/recharge-list') }}"
                ,cellMinWidth: 100
                ,cols: [[
                    {field:'order_no', width:'30%', title: '订单号'}
                    ,{field:'amount', title: '充值金额'}
                    ,{field:'status_name', title: '状态',templet:function(d){
                            return '<span class="layui-badge '+d.status_color+'">'+d.status_name+'</span>';
                        }}
                    ,{field:'updated_at', title: '更新时间'}
                ]]
                ,page: {
                    layout: ['prev', 'page', 'next']
                }
            });

            function openQrcode(code_url){
                layer.open({
                    type: 1,
                    content: $('#open-qrcode'),
                    title : '账户充值',
                    area: ['500px', '450px'],
                    success: function(layero, index){
                        createCode(code_url);
                    },
                    end: function(){
                        clearInterval(timeStatus);
                        $('#open-qrcode').hide();
                        $('#qrCodeDiv').html('');
                    }
                });
            }

            function createCode(code_url) {
                var qrWidth = 300;
                var qrHeight = 300;
                var logoQrWidth  = qrWidth/4;
                var logoQrHeight  = qrHeight/4;
                $('#qrCodeDiv').qrcode({
                    render : "canvas", //设置渲染方式，有table和canvas
                    text : code_url, //扫描二维码后自动跳向该链接
                    width : qrWidth, //二维码的宽度
                    height : qrHeight //二维码的高度
                });
                $("#qrCodeDiv canvas")[0].getContext('2d').drawImage($("#qrCodeIco")[0], (qrWidth - logoQrWidth) / 2, (qrHeight - logoQrHeight) / 2, logoQrWidth, logoQrHeight);
            }

            function getQrStatus(order_no){
                $.ajax({
                    type: 'GET',
                    global: false,
                    url: "{{ url('/qrStatus') }}",
                    data: {order_no:order_no},
                    dataType: 'JSON',
                    success: function (obj) {
                        if(obj.code === 0){
                            clearInterval(timeStatus);
                            layer.msg(obj.msg,{icon:1,time:2000},function() {
                                location.reload();
                            });
                        }
                    }
                });
            }
        });
    </script>
@endsection